<template>
  <RowWrapper>
    <RowAttribute :span="24" label="触发方式" required :label-width="labelWidth">
      <RelationTypeSelector :relation="relation" v-model="relation.relationType"/>
    </RowAttribute>

    <RowAttribute :span="24" label="触发前置条件" :label-width="labelWidth">
      <FormulaTextAreaConfig
        :value.sync="autoRelation.conditionFormula"
        :title.sync="autoRelation.conditionFormulaTitle"
        modalTitle="触发前置条件"
        :form-definition="formDefinition"
        :variableContainerConfig="variableContainerConfig"/>
    </RowAttribute>

    <RowAttribute :span="24" label="关联条件" :label-width="labelWidth">
      <AutoRelationFieldCondition
        :target-form-definition="relationTargetFormDefinition"
        :source-form-definition="formDefinition" :relation="relation"
        :autoRelation="autoRelation"/>
    </RowAttribute>

    <RowAttribute :span="24" label="关联条件查询策略" boldTitle :label-width="labelWidth">
      <div>
        <a-button shape="round" icon="setting" @click="() => $refs.AutoRelationStrategy.open()">自定义</a-button>
        <AutoRelationStrategy :autoRelation="autoRelation" ref="AutoRelationStrategy" />
      </div>
    </RowAttribute>
    <RowAttribute :span="24" label="规则说明" boldTitle :label-width="labelWidth">
      <div style="padding-top: 5px">
        运行时, 调用源表关联条件字段值若发生变化, 会触发自动关联; 若未改变, 但设置了关联时机, 则同样会触发自动关联.
      </div>
    </RowAttribute>

    <RowAttribute :span="24" label="关联时机" boldTitle :label-width="labelWidth">
      <div style="display: flex; align-items: center; padding-left: 10px">
        打开表单时:
        <a-button style="margin-left: 10px" shape="round" icon="setting"
                  @click="() => $refs.AutoRelationAutoRefreshConfig.open()">设置</a-button>
        <AutoRelationAutoRefreshConfig :form-definition="formDefinition"
          :autoRelation="autoRelation" ref="AutoRelationAutoRefreshConfig"/>
      </div>
    </RowAttribute>
  </RowWrapper>
</template>
<script>
import RowWrapper from '@comp/hhd/layout/RowWrapper.vue';
import {createProps} from '@/utils';
import {createAuto, createRelation} from '@comp/hhd/design/relation/types';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import RelationTypeSelector from '@comp/hhd/design/relation/RelationTypeConfig/RelationTypeSelector.vue';
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue';
import FormulaTextAreaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaTextAreaConfig.vue';
import AutoRelationFieldCondition from '@comp/hhd/design/relation/AutoRelation/AutoRelationFieldCondition.vue';
import AutoRelationStrategy from '@comp/hhd/design/relation/AutoRelation/AutoRelationStrategy.vue';
import AutoRelationAutoRefreshConfig from '@comp/hhd/design/relation/AutoRelation/AutoRelationAutoRefreshConfig.vue';

export default {
  name: 'AutoRelation',
  components: {
    AutoRelationAutoRefreshConfig,
    AutoRelationStrategy,
    AutoRelationFieldCondition,
    FormulaTextAreaConfig,
    RelationTypeSelector,
    RowAttribute,
    RowWrapper
  },
  props: {
    labelWidth: createProps(String),
    relation: createProps(Object, createRelation),
    formDefinition: createProps(Object, createFormDefinition),
    relationTargetFormDefinition: createProps(Object, createFormDefinition),
  },
  computed: {
    variableContainerConfig() {
      let formIds = [(this.formDefinition.subForms || []).map(i => i.id), this.formDefinition.id].toString();
      return {
        containers: ['formVariable'],
        formDefinition: this.formDefinition,
        formIds
      };
    },
    autoRelation() {
      let res = this.relation.auto
      if (!res) {
        res = this.relation.auto = createAuto();
      }
      return res;
    },
  },
  watch: {
    'relation.relationType'() {
      this.$nextTick(() => {
        this.$set(this.relation, 'auto', this.auto = (this.relation.auto || createAuto()));
      });
    }
  }
};
</script>